import {ReactButton, ReactLabel, ReactTextArea} from "components/data/react-element";
import React from "react";
import {computed, observable, observer} from 'mobx.collection';
import './-page.scss';

@observer
class MessageInfoInput extends React.Component {
    @observable ReactTextAreaElement;

    @computed get value() {
        return this.ReactTextAreaElement?.value;
    }

    onClick(isSave, e) {
        this.props?.onClick?.(isSave, e, this.ReactTextAreaElement);
    }

    setValue(value) {
        this.ReactTextAreaElement.setValue(value);
    }

    onChange(e) {
        this.props?.onChange?.(e);

        return true;
    }

    render() {
        return (
            <div className={"--message-textarea " + (this.props.className || 'font-size-34')}>
                {
                    this.props.title ? <ReactLabel title={this.props.title}/> : null
                }
                <div className="column-textarea">
                    <ReactTextArea value={this.props.value}
                                   defaultValue={this.props.defaultValue}
                                   onChange={this.onChange.bind(this)}
                                   ref={_ => this.ReactTextAreaElement = _}
                                   placeholder={this.props.placeholder}/>
                </div>
                {this.props.children}
                <footer className="common-footer">
                    <ReactButton className={"font-size-34"} onClick={this.onClick.bind(this, true)}>保存</ReactButton>
                </footer>
            </div>
        );
    }
}

export default MessageInfoInput;